<template>
  <div class="pieBox">
    <div class="boxIn">
      <div class="boxIn-l">
        <!-- <dv-charts :option="option" /> -->
        <div id="myChart1"></div>
      </div>
      <div class="xx-1">
        <div class="xx">
          <table class="boxIn-r">
            <tr>
              <th>
                <div class="tablea"></div>
              </th>
              <th>媒体来源</th>
              <th>文章数量</th>
              <th>占比</th>
            </tr>
            <tr v-for="(data,i) in table" :key="i">
              <td>
                <div class="tablea"></div>
              </td>
              <td class="tablea1">{{data.name}}</td>
              <td class="tablea2">{{data.value}}</td>
              <td class="tablea3">{{data.per}}%</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "pieBox",
  data() {
    return {
      option: {},
      table: [],
      colors: ["#1141f8", "#21cffd", "#fd557d", "#d729ff", "#f56640"],
      dataStyle: {
        normal: {
          label: {
            show: true,
            color: "#fff",
            fontSize: 14
          },
          labelLine: {
            //smooth: 0.2,
            length: 15,
            length2: 30
          }
        }
      },
      placeHolderStyle: {
        normal: {
          color: "rgba(0,0,0,0)",
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          color: "rgba(0,0,0,0)"
        }
      }
    };
  },
  methods: {
    onloadpie() {
      this.axios
        .get(apis.querySpiderDis, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          this.table = res.data.result;
          this.handlePieData(res.data.result);
          this.option = {
            series: [
              {
                type: "pie",
                radius: "75%",
                data: res.data.result,
                insideLabel: {
                  show: true
                },
                roseType: true,
                outsideLabel: {
                  show: false
                }
              }
            ],
            color: ["#289CEE", "#B84DA0", "#2BF2C7", "#7F69BC"]
          };
        })
        .catch(function(error) {
          alert(error);
        });
    },
    handlePieData(data){
      if(data&&Array.isArray(data)){
        let series = [];
        let preSum = 0;
        data.forEach((item,index)=>{
          const seriesItem = {
            name:item.name,
            type: "pie",
            startAngle:45+45*index,
            clockWise: false,
            radius: [8+index*12, 13+index*12],
            itemStyle: this.dataStyle,
            hoverAnimation: false,
            data: [
              {
                value: preSum,
                name: "",
                itemStyle: this.placeHolderStyle
              },
              {
                value: item.per,
                name: item.name,
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  formatter: params => {
                    let text;
                    text = "{a|" + params.value + "%}";
                    return text;
                  },
                  rich: {
                    a: {
                      color: this.colors[index%this.colors.length]
                    }
                  }
                }
              },
              {
                value: 100-preSum-item.per,
                name: "",
                itemStyle: this.placeHolderStyle
              }
            ]
          };
          series.push(seriesItem);
          preSum+=Number(item.per);
        });
        const myChart = this.$echarts.init(document.getElementById("myChart1"));
        myChart.setOption({
          color:this.colors,
          angleAxis: {
            type: "category",
            z: 10,
            axisLine: {
              color: "#fff",
              lineStyle: {
                width: 1,
                color: "#1F0EFF"
              }
            }
          },
          radiusAxis: {
            min:0,
            max:13+series.length*12,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              color: "#fff"
            },
            axisLine: {
              show: false,
              color: "#fff",
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show:true,
              lineStyle: {
                width:1,
                type: "dotted",
                color: "#1F0EFF"
              }
            }
          },
          polar: {
            center: ["50%", "50%"],
            radius: 15+series.length*12
          },
          series:series
        });
      }
    }
  },
  mounted() {
    this.onloadpie();
  }
};
</script>
<style lang="less">
.pieBox {
  width: 100%;
  height: 275px;
  padding: 10px 17px 5px;
  margin-bottom: 36px;
  background: url(../assets/img/border1-2.png) no-repeat center center / 100%
    100%;
}
.boxIn {
  display: flex;
  &-l {
    width: 58%;
    margin-top: 30px;
    height: 200px;
  }
  .xx-1 {
    width: 42%;
    overflow: hidden;
  }
  .xx {
    // height: 150px;
    width: 103%;
    overflow: hidden;
    overflow-y: scroll;
  }
  &-r {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 5px;
    tr th {
      color: #00e3ff;
      padding: 7px 0;
    }
    tr:nth-child(5n+2) td .tablea {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      background-color: #1141f8;
    }
    tr:nth-child(5n+3) td .tablea {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      background-color: #21cffd;
    }
    tr:nth-child(5n+4) td .tablea {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      background-color: #fd557d;
    }
    tr:nth-child(5n+5) td .tablea {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      background-color: #d729ff;
    }
    tr:nth-child(5n+6) td .tablea {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      background-color: #f56640;
    }
    tr td {
      padding: 6px 0;
    }
    .tablea1 {
      color: #adf4fa;
    }
    .tablea2 {
      color: #84ffec;
    }
    .tablea3 {
      color: #eae09f;
    }
  }
}
#myChart1 {
  height: 100%;
}
</style>
